<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-02-28 09:58:37
 * @LastEditTime: 2022-03-17 10:42:36
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div>
    <el-table
      :data="tableData"
      border
      class="bidding"
      ref="add_material"
      :header-cell-style="{ padding: '0px', background: '#F2F3F7' }"
      :row-class-name="tabRowClassName"
      tooltip-effect="light"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="44" align="center"> </el-table-column>
      <el-table-column width="60" align="center" type="index" label="序号">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="订单编号" align="center" prop="orderNo" show-overflow-tooltip> </el-table-column>
      <el-table-column label="货品明细" align="center" prop="detailsList">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.detailsList" :key="index">
            <el-tooltip
              effect="light"
              :content="item.materialName + '【' + item.model + '】*' + item.purchaseQuantity + item.company"
              placement="top-start"
            >
              <p class="text_hidde" style="width: 100%">
                {{ item.materialName + '【' + item.model + '】*' + item.purchaseQuantity + item.company }}
              </p>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="不含税金额(元)" align="center" prop="noTaxPrice"> </el-table-column>
      <el-table-column label="税金(元)" align="center" prop="taxPrice"> </el-table-column>
      <el-table-column label="价税合计(元)" align="center" prop="totalTaxPrice"> </el-table-column>
      <el-table-column label="订单状态" align="center" prop="orderStatus">
        <template slot-scope="scope">
          {{ scope.row.orderStatus | purchaseQuantity }}
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      selectList: []
    }
  },
  props: {
    selectData: {
      type: Array
    },
    contractId: {
      type: [String, Number],
      require: true
    }
  },
  mounted() {
    this.getData()
  },
  filters: {
    purchaseQuantity(val) {
      return val == 105 ? '待验收' : '已完成'
    }
  },
  methods: {
    closeBtn() {
      this.$emit('Order', '')
    },
    subBtn() {
      if (this.selectList.length == 0) {
        this.$message.error('请选择材料')
      } else {
        let arr = []
        this.selectList.forEach(item => {
          let detailArr = ''
          item.detailsList.forEach((el, index) => {
            detailArr +=
              el.materialName +
              '【' +
              el.model +
              '】*' +
              el.purchaseQuantity +
              el.company +
              (index + 1 == item.detailsList.length ? '' : ',')
            // detailArr.push()
          })
          arr.push({
            ...item,
            // orderDetails: JSON.stringify(detailArr)
            orderDetails: detailArr
          })
        })
        this.$emit('Order', arr)
      }
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    handleSelectionChange(val) {
      this.selectList = val
    },
    getData() {
      this.$https({
        method: 'post',
        url: '/settlement/queryOrderDetail?contractId=' + this.contractId
      })
        .then(res => {
          if (res.code === 0) {
            this.tableData = res.data
            if (this.selectData.length) {
              this.selectData.forEach(item => {
                this.tableData.forEach((el, index) => {
                  if (item.orderId == el.orderId) {
                    this.tableData.splice(index, 1)
                  }
                })
              })
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
.footer {
  text-align: center;
  margin-top: 40px;
  .commonBtn,
  .commonBtn1 {
    width: 130px;
  }
}
</style>
